import React, { useRef, useState, useEffect } from 'react'
import { Canvas } from '@react-three/fiber'
import { useLoader, useFrame } from '@react-three/fiber'
// @ts-expect-error 忽略类型错误
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
// @ts-expect-error 忽略类型错误
import { AnimationMixer, AnimationClip, AmbientLight } from 'three'
import { OrbitControls } from '@react-three/drei'
import { Leva, useControls } from 'leva'

// 为 AnimatedModel 组件的 props 添加类型
interface AnimatedModelProps {
  modelPath: string
  scale?: [number, number, number] // 添加可选的 scale 属性
  position?: [number, number, number] // 添加可选的 scale 属性
  admin: number
}

const AnimatedModel: React.FC<AnimatedModelProps> = ({
  modelPath,
  scale = [1, 1, 1],
  position = [0, 0, 0],
  admin = 0
}) => {
  // 加载 GLTF 模型及动画数据
  const gltf = useLoader(GLTFLoader, modelPath)
  // 使用 useRef 存储 AnimationMixer
  const mixer = useRef<AnimationMixer>(new AnimationMixer(gltf.scene))

  // 使用 useState 存储动画数据
  const [animations] = useState<AnimationClip[]>(gltf.animations)

  // 灯光 环境光
  const light = new AmbientLight(0x000000, 1)
  gltf.scene.add(light)

  // 使用 useEffect 设置动画播放
  useEffect(() => {
    console.log(animations)
    if (animations && animations.length > 0) {
      mixer.current.clipAction(animations[admin]).play()
    }

    return () => {
      mixer.current.clipAction(animations[admin]).stop()
    }
  }, [admin, animations])

  // 在每一帧更新动画
  useFrame((state, delta) => mixer.current.update(delta))

  // 设置模型的缩放
  gltf.scene.scale.set(...scale)
  gltf.scene.position.set(...position)
  return <primitive object={gltf.scene} />
}

const App: React.FC = () => {
  const { 横宽, 身高, 宽窄, 左右, 上下, 前后, 动画 } = useControls({
    横宽: { value: 3, min: 0.1, max: 10, step: 0.1 },
    身高: { value: 3, min: 0.1, max: 10, step: 0.1 },
    宽窄: { value: 3, min: 0.1, max: 10, step: 0.1 },
    左右: { value: 0, min: -5, max: 5, step: 0.1 },
    上下: { value: -3, min: -5, max: 5, step: 0.1 },
    前后: { value: 0, min: -5, max: 5, step: 0.1 },
    动画: { value: 0, options: { 经典: 0, 小连招: 3, 连拳: 5, 前刺: 6 } }
  })

  return (
    <>
      {/* 渲染控制面板 */}
      <Leva />
      <Canvas>
        <ambientLight />
        <directionalLight position={[0, -3, 0]} />
        {/* 设置人物模型的缩放比例，例如：[0.5, 0.5, 0.5] */}
        {/* 使用 AnimatedModel 组件加载模型，并设置缩放比例 */}
        <AnimatedModel
          modelPath="/yzf.glb"
          admin={动画}
          position={[左右, 上下, 前后]}
          scale={[横宽, 身高, 宽窄]}
        />
        {/* 控制视角 */}
        <OrbitControls />
      </Canvas>
    </>
  )
}

export default App
